<template>
  <div>
    <a-collapse v-model="activeKey" :expand-icon-position="expandIconPosition">
      <a-collapse-panel key="1" header="派遣邀约客服">
        <a-row type="flex" justify="space-between">
          <a-col :span="11">
            <a-form-item label="邀约客服" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="model.inviteCustomerServiceName"  style="width: 100%" disabled/>
            </a-form-item>
          </a-col>
          <a-col :span="11">
            <a-form-item label="联系电话" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="model.inviteCustomerServicePhone"  style="width: 100%;" disabled/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <div style="display:flex;justify-content:space-between;">
              <a-button type="primary" v-has="'customer:dispatch'" @click="dispatch('inviteCustomerService')">派单</a-button>
              <a-button type="primary" v-has="'customer:applyDispatch'" @click="applyDispatch('邀约客服','inviteCustomerService')">申请派遣邀约客服</a-button>
              <a-button type="danger" v-has="'customer:deleteApplyDispatch'" @click="deleteApplyDispatch('inviteCustomerService')">删除</a-button>
            </div>
          </a-col>
        </a-row> 
      </a-collapse-panel>
      <a-collapse-panel key="2" header="派遣家装顾问">
        <a-row type="flex" justify="space-between">
          <a-col :span="11">
            <a-form-item label="家装顾问" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="model.homeAdviserName"  style="width: 100%" disabled/>
            </a-form-item>
          </a-col>
          <a-col :span="11">
            <a-form-item label="联系电话" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="model.homeAdviserPhone"  style="width: 100%;" disabled/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <div style="display:flex;justify-content:space-between;">
              <a-button type="primary" v-has="'customer:dispatch'" :disabled="model.inviteCustomerServiceName == null" @click="dispatch('homeAdviser')" style="margin-right: 20px">派单</a-button>
              <a-button type="primary" v-has="'customer:applyDispatch'" :disabled="model.inviteCustomerServiceName == null" @click="applyDispatch('家装顾问','homeAdviser')" style="margin-right: 20px">申请派遣家装顾问</a-button>
              <a-button type="danger" v-has="'customer:deleteApplyDispatch'" :disabled="model.inviteCustomerServiceName == null" @click="deleteApplyDispatch('homeAdviser')">删除</a-button>
            </div>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel key="3" header="派遣设计师">
        <a-row type="flex" justify="space-between">
          <a-col :span="11">
            <a-form-item label="设计师" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="model.designerName"  style="width: 100%" disabled/>
            </a-form-item>
          </a-col>
          <a-col :span="11">
            <a-form-item label="联系电话" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="model.designerPhone"  style="width: 100%;" disabled/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <div style="display:flex;justify-content:space-between;">
              <a-button type="primary" v-has="'customer:dispatch'" :disabled="model.homeAdviserName == null" @click="dispatch('designer')" style="margin-right: 20px">派单</a-button>
              <a-button type="primary" v-has="'customer:applyDispatch'" :disabled="model.homeAdviserName == null" @click="applyDispatch('设计师','designer')" style="margin-right: 20px">申请派遣设计师</a-button>
              <a-button type="danger" v-has="'customer:deleteApplyDispatch'" :disabled="model.homeAdviserName == null" @click="deleteApplyDispatch('designer')">删除</a-button>
            </div>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel key="4" header="派遣交付经理">
        <a-row type="flex" justify="space-between">
          <a-col :span="11">
            <a-form-item label="交付经理" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="model.projectKeeperName"  style="width: 100%" disabled/>
            </a-form-item>
          </a-col>
          <a-col :span="11">
            <a-form-item label="联系电话" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="model.projectKeeperPhone"  style="width: 100%;" disabled/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <div style="display:flex;justify-content:space-between;">
              <a-button type="primary" v-has="'customer:dispatch'" :disabled="model.designerName == null" @click="dispatch('projectKeeper')" style="margin-right: 20px">派单</a-button>
              <a-button type="primary" v-has="'customer:applyDispatch'" :disabled="model.designerName == null" @click="applyDispatch('交付经理','projectKeeper')" style="margin-right: 20px">申请派遣交付经理</a-button>
              <a-button type="danger" v-has="'customer:deleteApplyDispatch'" :disabled="model.designerName == null" @click="deleteApplyDispatch('projectKeeper')">删除</a-button>
            </div>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel key="5" header="派遣交付监理">
        <a-row type="flex" justify="space-between">
          <a-col :span="11">
            <a-form-item label="交付监理" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="model.projectSupervisionName"  style="width: 100%" disabled/>
            </a-form-item>
          </a-col>
          <a-col :span="11">
            <a-form-item label="联系电话" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="model.projectSupervisionPhone"  style="width: 100%;" disabled/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <div style="display:flex;justify-content:space-between;">
              <a-button type="primary" v-has="'customer:dispatch'" :disabled="model.projectKeeperName == null" @click="dispatch('projectSupervision')" style="margin-right: 20px">派单</a-button>
              <a-button type="primary" v-has="'customer:applyDispatch'" :disabled="model.projectKeeperName == null" @click="applyDispatch('交付监理','projectSupervision')" style="margin-right: 20px">申请派遣交付监理</a-button>
              <a-button type="danger" v-has="'customer:deleteApplyDispatch'" :disabled="model.projectKeeperName == null" @click="deleteApplyDispatch('projectSupervision')">删除</a-button>
            </div>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel key="6" header="派遣预决算员">
        <a-row type="flex" justify="space-between">
          <a-col :span="11">
            <a-form-item label="预决算员" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="model.preFinalAccountsName"  style="width: 100%" disabled/>
            </a-form-item>
          </a-col>
          <a-col :span="11">
            <a-form-item label="联系电话" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="model.preFinalAccountsPhone"  style="width: 100%;" disabled/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <div style="display:flex;justify-content:space-between;">
              <a-button type="primary" v-has="'customer:dispatch'" :disabled="model.projectSupervisionName == null" @click="dispatch('preFinalAccounts')" style="margin-right: 20px">派单</a-button>
              <a-button type="primary" v-has="'customer:applyDispatch'" :disabled="model.projectSupervisionName == null" @click="applyDispatch('预决算员','preFinalAccounts')" style="margin-right: 20px">申请派遣预决算员</a-button>
              <a-button type="danger" v-has="'customer:deleteApplyDispatch'" :disabled="model.projectSupervisionName == null" @click="deleteApplyDispatch('preFinalAccounts')">删除</a-button>
            </div>
          </a-col>
        </a-row>
      </a-collapse-panel>
    </a-collapse>
    

    <select-user-modal ref="selectUserModal" @selectFinished="selectOK"></select-user-modal>
    <select-depart-modal ref="selectDepartModal" @selectFinished="selectOK"></select-depart-modal>
  </div>
</template>

<script>
  import { getAction, postAction } from '@api/manage'
  import SelectUserModal from "./modules/SelectUserModal";
  import SelectDepartModal from "./modules/SelectDepartModal";
  export default {
    name: "StaffAppoint",
    components: {
      SelectUserModal,
      SelectDepartModal
    },
    props:{
      customerId: {
        required: true,
        default: 0
      },
    },
    data() {
      return {
        activeKey:[1,2,3,4,5,6],
        expandIconPosition: 'right',
        formData: {
          homeAdviser: '',
          designer: '',
          userIds: ''
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        paidanType:'',
        applyDispatchType:'',
        model:{},
        url: {
          queryByCustomerId: "/ghPersonAppointInfo/queryByCustomerId",
          paidanUrl: "/ghPersonAppointInfo/add",
          applyDispatchUrl: "/ghCustomerInfo/sendBusAnnouncement",
          deleteAppointInfoUrl: "/ghCustomerInfo/deleteAppointInfo"
        },
        applyDispatchFlag:''
      }
    },
    created () {
      //初始化数据
      this.initPersonAppointData();
    },
    methods:{
      //派单
      dispatch(paidanType) {
        this.applyDispatchFlag = false;
        this.paidanType = paidanType;
        this.$refs.selectUserModal.onClearSelected();
        this.$refs.selectUserModal.add();
        this.$refs.selectUserModal.title = "派单";
      },
      applyDispatch(title,applyDispatchType){
          this.applyDispatchFlag = true;
          this.applyDispatchType = applyDispatchType;
          this.$refs.selectDepartModal.onClearSelected();
          this.$refs.selectDepartModal.add();
          this.$refs.selectDepartModal.title = title;
      },
      deleteApplyDispatch(applyDispatchType){
        let ghCustomerInfo = {}
        let ghPersonAppointInfo = {}
        let params = {};
        ghCustomerInfo.id = this.customerId;
        ghPersonAppointInfo.customerId = this.customerId;
        params.ghCustomerInfo = ghCustomerInfo;
        params.ghPersonAppointInfo = ghPersonAppointInfo;
        params.type = applyDispatchType;
        postAction(this.url.deleteAppointInfoUrl, params).then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.initPersonAppointData();
          } else {
            this.$message.warning(res.message)
          }
        })
      },
      selectOK(data) {
        let httpUrl="";
        let params = {}
        //applyDispatchType为true，则表示是申请派遣业务员，否则就是派单
        if (this.applyDispatchFlag == true){
          params.id = this.customerId;
          params.userId = data.id;
          params.title = this.$refs.selectDepartModal.title;
          httpUrl = this.url.applyDispatchUrl;
          switch (this.applyDispatchType) {
            case "inviteCustomerService":
              params.inviteCustomerService = data.realname == null?'':data.realname;
              params.inviteCustomerServiceId = data.id == null?'':data.id;
              break;
            case "homeAdviser":
              params.homeAdviser = data.realname == null?'':data.realname;
              break;
            case "designer":
              params.designer = data.realname == null?'':data.realname;
              break;
            case "projectKeeper":
              params.projectKeeper = data.realname == null?'':data.realname;
              break;
            case "projectSupervision":
              params.projectSupervision = data.realname == null?'':data.realname;
              break;
            case "preFinalAccounts":
              params.preFinalAccounts = data.realname == null?'':data.realname;
              break;
          }
        } else {
          httpUrl = this.url.paidanUrl;
          params.customerId = this.customerId
          switch (this.paidanType) {
            case "inviteCustomerService":
              params.inviteCustomerServiceName = data.realname == null?'':data.realname;
              params.inviteCustomerServicePhone = data.phone == null?'':data.phone;
              params.inviteCustomerServiceId = data.id == null?'':data.id;
              params.currentAppoint = 1;
              break;
            case "homeAdviser":
              params.homeAdviserName = data.realname == null?'':data.realname;
              params.homeAdviserPhone = data.phone == null?'':data.phone;
              params.currentAppoint = 2;
              break;
            case "designer":
              params.designerName = data.realname == null?'':data.realname;
              params.designerPhone = data.phone == null?'':data.phone;
              params.currentAppoint = 3;
              break;
            case "projectKeeper":
              params.projectKeeperName = data.realname == null?'':data.realname;
              params.projectKeeperPhone = data.phone == null?'':data.phone;
              params.currentAppoint = 4;
              break;
            case "projectSupervision":
              params.projectSupervisionName = data.realname == null?'':data.realname;
              params.projectSupervisionPhone = data.phone == null?'':data.phone;
              params.currentAppoint = 5;
              break;
            case "preFinalAccounts":
              params.preFinalAccountsName = data.realname == null?'':data.realname;
              params.preFinalAccountsPhone = data.phone == null?'':data.phone;
              params.currentAppoint = 6;
              break;
          }
        }
        postAction(httpUrl, params).then((res) => {
          if (res.success) {
            this.initPersonAppointData()
            this.$message.success(res.message)
            this.$emit("ok");
          } else {
            this.$message.warning(res.message)
          }
        })
      },
      initPersonAppointData(){
        getAction(this.url.queryByCustomerId,{
            customerId: this.customerId
          }).then(res=>{
          if(res.success){
            this.model = res.result;
          }
        })
      },
    },
  }
</script>

<style scoped>

</style>